<template>
  <zh-form-item
    :desc="props.desc"
    :layout="props.layout"
    :required="props.required"
    :label="props.label"
    :field="props.field"
    :rules="props.rules"
    :margin="props.margin"
    :padding="props.padding"
    :parentClass="props.parentClass"
    :align="props.align"
    :help="props.help"
    :border="props.border"
    :showError="props.showError"
    :requiredTitleChangeColor="props.requiredTitleChangeColor"
    :transprent="true"
    :round="props.round"
  >
    <zh-rate
      v-bind="allAttrs"
      v-model="_value"
      :transprent="props.transprent"
      @change="onChange"
      :showLabel="props.showLabel"
      :size="props.size"
      :defaultValue="_value"
      :width="props.count"
      :label="props.rateLabel"
      :gutter="props.gutter"
    >
    </zh-rate>
  </zh-form-item>
</template>

<script lang="ts" setup>
import { computed, watch, PropType, useAttrs, ref, getCurrentInstance, onUnmounted, Ref, inject, isProxy, toRaw, ComputedRef, onMounted, nextTick } from 'vue';
import { rulesItem } from '../zh-form-item/interface';
const props = defineProps({
  parentClass: {
    type: String,
    default: '',
  },
  align: {
    type: String,
    default: '',
  },
  inputAlign: {
    type: String,
    default: '',
  },
  label: {
    type: String,
    default: '',
  },
  layout: {
    type: String as PropType<'vertical' | 'horizontal'>,
    default: '',
  },
  //表单描述
  desc: {
    type: String,
    default: '',
  },
  field: {
    type: String,
    default: '',
  },
  //表彰底部的单项注意说明。
  help: {
    type: String,
    default: '',
  },
  //是否必填
  required: {
    type: Boolean,
    default: false,
  },
  //检验规则
  rules: {
    type: [Object, Array] as PropType<Array<rulesItem> | rulesItem>,
    default: () => {
      return [{ validator: false, required: false }];
    },
  },
  margin: {
    type: Array as PropType<Array<number>>,
    default: () => [0, 0],
  },
  padding: {
    type: Array as PropType<Array<number>>,
    default: () => [0, 0],
  },
  //显示下划线。
  border: {
    type: Boolean,
    default: null,
  },
  showError: {
    type: Boolean,
    default: true,
  },
  //校验不通过时，是否让标题跟着变化文字颜色，默认是。
  requiredTitleChangeColor: {
    type: Boolean,
    default: false,
  },
  transprent: {
    type: [Boolean, String],
    default: null,
  },
  round: {
    type: Number,
    default: 0,
  },
  modelValue: {
    type: [Number],
    default: 0,
  },
  //右边的分值，默认为空即显示星数值。如果提供了其它值，就不显示默认的，比如9.6分
  rateLabel: {
    type: [String],
    default: '',
  },
  //前缀图标
  prefix: {
    type: String,
    default: '',
  },
  showLabel: {
    type: Boolean,
    default: true,
  },
  //图标间距
  gutter: {
    type: Number,
    default: 16,
  },
  //组件大小
  size: {
    type: Number,
    default: 42,
  },

  count: {
    type: [Number],
    default: 5,
  },

  extend: {
    // 扩展属性，对象形式，存放组件的扩展属性
    type: Object,
    default: () => {
      return {};
    },
  },
});
const attrs = useAttrs();
const allAttrs = computed(() => {
  return Object.assign(props.extend, attrs);
});
const emits = defineEmits(['update:modelValue', 'update:modelStr', 'change']);
const _value = ref(props.modelValue);
const zhFormInputAlign = inject(
  'zhFormInputAlign',
  computed(() => 'left')
);
const zhFormTransprent = inject(
  'zhFormTransprent',
  computed(() => false)
);
const onChange = (e) => {
  emits('change', e);
};
onMounted(() => {});
watch(
  () => props.modelValue,
  (val) => {
    _value.value = val;
  },
  {
    deep: true,
  }
);
watch(
  () => _value,
  (val) => {
    emits('update:modelValue', val.value);
  },
  {
    deep: true,
  }
);
</script>

<style></style>
